<template>
  <div class="container">
    <div class="actionbar">
      <vxe-toolbar>
        <template #buttons>
          <n-space>
            <n-button
              class="locate-btn"
              strong
              secondary
              type="info"
              size="large"
              @click="insertEvent()"
            >
              <n-icon :size="20"> <svg-icon name="addNew"></svg-icon> </n-icon
              >新增
            </n-button>
            <n-button
              class="locate-btn"
              strong
              secondary
              type="info"
              size="large"
              @click="exportDataEvent"
            >
              <n-icon :size="20"> <svg-icon name="export"></svg-icon> </n-icon
              >导出表格
            </n-button>
            <n-button
              class="locate-btn"
              strong
              secondary
              type="info"
              size="large"
              @click="openExportEvent"
            >
              <n-icon :size="20">
                <svg-icon name="advancedexport"></svg-icon> </n-icon
              >高级导出
            </n-button>
          </n-space>
        </template>
      </vxe-toolbar>
    </div>
    <div class="table-body">
      <vxe-table
        border
        resizable
        show-overflow
        ref="xTable"
        height="500"
        :export-config="{}"
        :row-config="{ isHover: true }"
        :data="tableData"
        @cell-dblclick="cellDBLClickEvent"
      >
        <vxe-column field="id" title="题目编号" width="180"></vxe-column>
        <vxe-column
          field="company_name"
          title="面试公司"
          width="120"
        ></vxe-column>
        <vxe-column
          field="topic"
          title="笔试/面试题目"
          show-overflow
        ></vxe-column>
        <vxe-column title="操作" width="180" show-overflow>
          <template #default="{ row }">
            <div class="btn-operate">
              <n-button
                class="locate-btn"
                strong
                secondary
                type="info"
                size="small"
                @click="editEvent(row)"
              >
                <n-icon :size="20"> <svg-icon name="edit"></svg-icon> </n-icon
                >编辑
              </n-button>

              <n-button
                class="locate-btn"
                strong
                size="small"
                secondary
                type="error"
                @click="removeEvent(row)"
              >
                <n-icon :size="20">
                  <svg-icon name="delete"></svg-icon>
                </n-icon>
                删除
              </n-button>
            </div>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-modal
        v-model="showEdit"
        :title="selectRow ? '编辑&保存' : '新增&保存'"
        width="800"
        min-width="600"
        min-height="300"
        :loading="submitLoading"
        resize
        destroy-on-close
      >
        <template #default>
          <vxe-form
            :data="formData"
            :rules="formRules"
            title-align="right"
            title-width="100"
            @submit="submitEvent"
          >
            <vxe-form-item
              title="Basic information"
              title-align="left"
              :title-width="200"
              :span="24"
              :title-prefix="{ icon: 'fa fa-address-card-o' }"
            ></vxe-form-item>
            <vxe-form-item
              field="id"
              title="题目编号"
              :span="12"
              :item-render="{}"
            >
              <template #default="{ data }">
                <vxe-input
                  v-model="data.id"
                  placeholder="请输入题目编号"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item
              field="student_id"
              title="学生编号"
              :span="12"
              :item-render="{}"
            >
              <template #default="{ data }">
                <vxe-input
                  v-model="data.student_id"
                  placeholder="请输入学生编号"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item
              field="company_name"
              title="公司名称"
              :span="12"
              :item-render="{}"
            >
              <template #default="{ data }">
                <vxe-input
                  v-model="data.company_name"
                  placeholder="请输入笔试/面试公司名称"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item
              title="Other information"
              title-align="left"
              :title-width="200"
              :span="24"
              :title-prefix="{
                message: '请填写必填项',
                icon: 'fa fa-info-circle',
              }"
            ></vxe-form-item>
            <vxe-form-item
              field="topic"
              title="笔试/面试题目"
              :span="24"
              :item-render="{}"
              :title-suffix="{
                message: '提示信息！！',
                icon: 'fa fa-question-circle',
              }"
            >
              <template #default="{ data }">
                <vxe-textarea
                  v-model="data.topic"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                ></vxe-textarea>
              </template>
            </vxe-form-item>
            <vxe-form-item align="center" title-align="left" :span="24">
              <template #default>
                <vxe-button type="submit">提交</vxe-button>
                <vxe-button type="reset">重置</vxe-button>
              </template>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-modal>
    </div>
  </div>
</template>

<script>
import VXETable from "vxe-table"
//引入接口
import { getTopic, addTopic, editTopic, deleteTopic } from "@/http/api/student"
export default {
  data() {
    return {
      submitLoading: false,
      tableData: [
        // {
        //   id: 1,
        //   company_name: "Test1",
        //   topic: "面试题",
        // },
        // {
        //   id: 1,
        //   company_name: "Test1",
        //   topic: "面试题",
        // },
        // {
        //   id: 1,
        //   company_name: "Test1",
        //   topic: "面试题",
        // },
      ],
      selectRow: null,
      showEdit: false,
      formData: {
        id: null,
        student_id: null,
        company_name: null,
        topic: null,
      },
      formRules: {
        id: [{ required: true, message: "请输入题目编号" }],
        // student_id: [{ required: true, message: "请输入学生编号" }],
        company_name: [{ required: true, message: "请输入公司名称" }],
        topic: [{ required: true, message: "请输入题目" }],
      },
    }
  },
  methods: {
    // 获取面试题数据
    getTopicData() {
      getTopic()
        .then((result) => {
          this.tableData = result.result
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 导出表格数据
    exportDataEvent() {
      this.$refs.xTable.exportData({ type: "csv" })
    },
    // 高级导出
    openExportEvent() {
      this.$refs.xTable.openExport()
    },
    visibleMethod({ data }) {
      return data.flag1 === "Y"
    },
    cellDBLClickEvent({ row }) {
      this.editEvent(row)
    },
    insertEvent() {
      this.formData = {
        id: "",
        student_id: "",
        company_name: "",
        topic: "",
      }
      this.selectRow = null
      this.showEdit = true
    },
    editEvent(row) {
      this.formData = {
        id: row.id,
        company_name: row.company_name,
        topic: row.topic,
      }
      this.selectRow = row
      this.showEdit = true
    },
    async removeEvent(row) {
      const type = await VXETable.modal.confirm("您确定要删除该数据?")
      const $table = this.$refs.xTable
      if (type === "confirm") {
        // $table.remove(row)
        // console.log(row)
        deleteTopic(row)
          .then((result) => {
            // console.log(result)
            VXETable.modal.message({ content: "删除成功", status: "success" })
            this.getTopicData()
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    submitEvent() {
      this.submitLoading = true
      const $table = this.$refs.xTable
      this.submitLoading = false
      this.showEdit = false
      if (this.selectRow) {
        // VXETable.modal.message({ content: "保存成功", status: "success" })
        // Object.assign(this.selectRow, this.formData)
        // console.log(this.formData)
        editTopic(this.formData)
          .then((result) => {
            // console.log(result)
          })
          .catch((err) => {
            console.log(err)
          })

        VXETable.modal.message({ content: "保存成功", status: "success" })
        this.getTopicData()
      } else {
        addTopic(this.formData)
          .then((result) => {
            // console.log(result)
          })
          .catch((err) => {
            console.log(err)
          })
        VXETable.modal.message({ content: "新增成功", status: "success" })
        this.getTopicData()
      }
    },
  },
  mounted() {
    this.getTopicData()
  },
}
</script>

<style lang="scss" scoped>
.container {
  .actionbar {
    margin-top: 1%;

    // 去除router-link默认样式
    .router-link-active {
      text-decoration: none;
      color: #fff;
    }

    a {
      text-decoration: none;
      color: #fff;
    }
  }

  .table-body {
    margin-top: 1%;

    .btn-operate {
      display: flex;
      justify-content: space-evenly;

      .locate-btn {
        margin-top: 5%;
      }
    }
  }
}
</style>
